<script setup>
    import * as echarts from "echarts"
    import { onMounted } from 'vue'

    const props = defineProps({
        houseStatus: {
            type: Array,
            default: []
        }
    })

    let data = $ref([])

    props.houseStatus.map(item => {
        data.push({
            name: item.name,
            value: item.numb
        })
    })

    let eCharts = null
    let sexPie = $ref(null)

    onMounted(() => {
        init()
    })

    const init = () => {
        let option = {
            color: ['#E85C82', '#73EDF8', '#31CF70'],
            legend: {
                top: '40%',
                left: '55%',
                itemWidth: 15,
                orient: 'vertical',
                textStyle: {
                    backgroundColor: 'transparent',
                    color: '#fff',
                    width: 50,
                    fontSize: 16,
                },
                formatter: function(name) {
                    var data = option.series[0].data;//获取series中的data
                    var total = 0;
                    var tarValue;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += Number(data[i].value);
                        if (data[i].name == name) {
                            tarValue = Number(data[i].value);
                        }
                    }
                    console.log(tarValue , total)
                    var p = ((tarValue / total) * 100);
                    return name + " " + " " + p.toFixed(2) + "%";
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 70],
                    center: ['30%', '50%'],
                    label: {
                        normal: {
                            show: false,
                            color: '#fff',
                            fontSize: 15,
                            formatter: '{d}%'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                }
            ]
        }

        eCharts = echarts.init(sexPie)
        eCharts.setOption(option)

    }
</script>

<template>
    <div class="sex-pie" ref="sexPie"></div>
</template>

<style lang="less" scoped>
    .sex-pie{
        width: 300px;
        height: 204px;
    }
</style>